<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./axios.js"></script>
    <script src="http://150.158.14.110:8080/public/website/list"></script>

</head>

<body>
    <div class="container">
        <button>Get Data</button>
        <button>POST Data</button>
        <button>PUT Data</button>
        <button>DELETE Data</button>
    </div>
    <img id="captchaImage" alt="">
    <script>
        const btn = document.querySelectorAll("button")
        const captchaImageEl = document.getElementById('captchaImage')
        let baseURL = "http://150.158.14.110:8080/"
        /* 把公共变量提取出来 */
        let loginApi = "login"
        let captchaImage = "captchaImage"
        /* 先获取验证码 */
        /* 用函数封装请求 */
        const getCaptchaImage = () => {
            axios.get(`${baseURL}${captchaImage}`).then(({ data }) => {
                const imagePrefix = `data:image/gif;base64,`
                captchaImageEl.src = `${imagePrefix}${data.img}`
            })
        }

        /* BASE64 */
        getCaptchaImage()
        btn[0].onclick = function () {
            getCaptchaImage()

            axios({
                method: 'POST',
                url: baseURL + loginApi,
                data: {
                    "username": "observer",
                    "password": "axobserver",
                    "code": "11",
                    "uuid": "4cf056be371843d5bab4421c566fa840"
                }
            }).then(response => {
                console.log(response);

            })
        }

        // btn[0].onclick = function () {

        //     axios.get('http://150.158.14.110:8080/public/website/list')
        //         .then(response => {
        //             console.log(response.data);
        //         })
        //         .catch(error => {
        //             console.error('Error fetching data:', error);
        //         })
        // }

        // btn[1].onclick = function () {
        //     axios({
        //         method: 'post',
        //         url: 'http://150.158.14.110:8080/public/website/list',
        //         data: {
        //             id: "938",
        //             name: "test"
        //         }
        //     }).then(response => {
        //         console.log(response.data);

        //     })
        // }

        //
        btn[2].onclick = function () {
            axios({
                // delete
                method: 'PUT',
                url: 'http://150.158.14.110:8080/public/website/list/?id=938',
                data: {
                    name: "test",
                },
            }).then(response => {
                console.log(response);
            })
        }

        // btn[3].onclick = function () {
        //     axios({
        //         method: 'delete',
        //         url: 'http://150.158.14.110:8080/public/website/list'
        //     }).then(response => {
        //         console.log(response.data);

        //     })
        // }

        // const example = axios.create({
        //     baseURL: 'https://example.com/api/',
        //     timeout: 1000,
        // })
        // example({
        //     url: "./get"
        // }).then(response => {
        //     console.log(response);
        // })

    </script>
</body>

</html>